<!-- 推送明细查询 -->
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true">
            <el-form-item label="规格名称" prop="specName">
                <el-input
                    v-model="queryParams.specName"
                    placeholder="请输入规格名称"
                    clearable
                    @keyup.enter="handleQuery"
                ></el-input>
            </el-form-item>
        </el-form>
        <!-- button area -->
        <el-row :gutter="20" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Search"
                    @click="handleQuery"
                    >查询</el-button
                >
            </el-col>
        </el-row>
        <el-table :data="tableData" v-loading="loading">
            <el-table-column
                v-if="false"
                label="主键"
                align="center"
                prop="id"
            ></el-table-column>
            <el-table-column
                label="规格主键"
                align="center"
                prop="specId"
            ></el-table-column>
            <el-table-column
                label="规格编码"
                align="center"
                prop="specCode"
            ></el-table-column>
            <el-table-column
                label="规格名称"
                align="center"
                prop="specName"
            ></el-table-column>
            <el-table-column
                label="规格状态"
                align="center"
                prop="state"
            ></el-table-column>
        </el-table>
    </div>
</template>

<script setup>
import { reactive, ref, toRefs, getCurrentInstance } from 'vue'
import { list } from '@/api/order/spec'
const { proxy } = getCurrentInstance()
const data = reactive({ tableData: [], queryParams: { specName: '' } })
const { queryParams, tableData } = toRefs(data)
const loading = ref(false)
function handleQuery() {
    loading.value = true
    list(queryParams.value).then((resp) => {
        proxy.$modal.msgSuccess('查询成功')
        tableData.value = resp.data
        loading.value = false
    })
}

handleQuery()
</script>
<style scoped></style>
